<template>
    <div class="div-container">
      <div class="div-container" ref="historyChart"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import moment from "moment";
  
  export default {
      props:['siloResult'],
      data(){
          return{
              // series:undefined,
              option:undefined,
              historyChart:undefined,
              // thisSiloResult:undefined,
          }
      },
      watch:{
          siloResult:{
              deep:true,
              handler(newValue){
                  this.initChart();
              }
          }
      },
      mounted(){
      },
      beforeDestroy(){
          if(this.historyChart){
              this.historyChart.dispose();
              this.historyChart = null;
          }
      },
      methods:{
          initChart(){
              if(!this.siloResult) return;
              var dateAxis = [];
              var volAxis = [];
              var weighAxis = [];
              this.siloResult.forEach(item => {
                  dateAxis.push(moment(item.createTime).format("YYYY-MM-DD HH:mm:ss").substring(11));
                  volAxis.push(item.linerVol)
                  weighAxis.push(item.linerWeigh)
              });
  
              if(this.historyChart){
                this.option.xAxis.data = dateAxis;
                this.option.series[0].data = volAxis;
                this.option.series[1].data = weighAxis;
              }else{
                  this.option = {
                      legend:{
                          show:true,
                          data:["体积","重量"],
                          itemWidth: 10, 
                          itemHeight: 6,
                          textStyle:{
                            fontSize:10,
                            color:'#fff'
                          } 
                      },
                      tooltip:{
                          trigger: 'axis',
                      },
                      xAxis: {
                        type: 'category',
                        data: dateAxis,
                        boundaryGap: false,
                        nameTextStyle:{
                            color:'#fff'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff'
                            },
                        },
                        axisLabel:{
                            textStyle:{
                                color:'#fff'
                            }
                        }
                      },
                      yAxis: {
                          type: 'value',
                        nameTextStyle:{
                            color:'#fff'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff'
                            },
                        },
                        axisLabel:{
                            textStyle:{
                                color:'#fff'
                            }
                        },
                        splitLine:{
                            show:false
                        }
                      },
                      grid: {
                        left: '0.5%',   // 距离容器左边缘的距离
                        right: '1%',   // 距离容器右边缘的距离
                        top: '10%',    // 距离容器上边缘的距离
                        bottom: '0',  // 距离容器下边缘的距离
                        containLabel :true,
                      },
                      series: [
                        {
                            name:"体积",
                            data: volAxis,
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                        },
                        {
                            name:"重量",
                            data: weighAxis,
                            type: 'line',
                            smooth: true,
                            showSymbol: false,
                        },
                      ]
                  };
                  this.historyChart = echarts.init(this.$refs.historyChart);
              }
              this.historyChart.setOption(this.option,true);
          },
          historyChartResize(){
              if(this.historyChart) {
                  this.historyChart.resize()
              }
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
      .div-container{
          width: 100%;
          height: 100%;
      }
  </style>